import './index.scss'
import { ScrollView, View } from '@tarojs/components'
import { observer } from 'mobx-react'
import { useContext, useEffect, useState } from 'react'
import Taro, { useDidHide, useDidShow, useRouter, useUnload } from '@tarojs/taro'
import { CCard } from '@/components/card'
import { IconImg } from '@/components/images'
import { StatusText } from '@/components/text'
import { LogByDev, LogByUser } from './components'
import { devLogStore, LogType } from './model'
import { DatePickerRow } from '@/components/date'

const Devlog: React.FC = (): JSX.Element => {
  let router = useRouter()
  const {
    changeCurrentSwitch,
    currentSwitch,
    updatePageQuery,
    changeDateRange,
    logList,
    canUpDate,
    addPage,
    updateLogList,
    devStatus,
    updateDevStatus,
    clearPageData
  } = useContext(devLogStore)
  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Devlog useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Devlog useDidShow')
    updatePageQuery(router.params)
    updateDevStatus()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Devlog useDidHide')
  })
  useUnload(() => {
    clearPageData()
  })
  return (
    <View className="w-screen h-screen flex flex-col bg-xx_bg">
      {/* 分析卡片 */}
      <CCard
        style={{
          backgroundColor: 'transparent',
          marginBottom: '16rpx'
        }}
      >
        <View className="p-16 bg-white rounded-12">
          <View className="flex items-center mb-20">
            <IconImg
              imgName="device"
              style={{
                width: '40rpx',
                height: '40rpx'
              }}
            ></IconImg>
            <View className="ml-6 text-16 font-bold">{devStatus?.devName}</View>
          </View>
          <View className="h-28 flex justify-center items-center">
            <View className="h-28 flex items-center">
              <View className="mr-8 text-14 text-xx_text">设备在线</View>
              <StatusText
                style={{
                  fontSize: '48rpx',
                  fontWeight: 'bold'
                }}
                status={devStatus?.onLineRatio || 0}
              >{`${devStatus?.onLineRatio || '--'}%`}</StatusText>
            </View>
            <View
              className="mx-16 w-0 h-20"
              style={{
                border: '0 solid #D9D9D9',
                borderLeftWidth: '2rpx'
              }}
            ></View>
            <View className="h-28 flex items-center">
              <View className="mr-8 text-14 text-xx_text">设备正常</View>
              <StatusText
                style={{
                  fontSize: '48rpx',
                  fontWeight: 'bold'
                }}
                status={devStatus?.standRatio || 0}
              >{`${devStatus?.standRatio || '--'}%`}</StatusText>
            </View>
          </View>
        </View>
      </CCard>

      {/* 日期选择栏 */}
      <DatePickerRow changeDateRange={(s, e) => {
        setTimeout(() => {
          changeDateRange(s, e)
        })
      }}></DatePickerRow>

      {/* 日志类型切换栏 */}
      <View className="h-38 mb-14 grid grid-cols-3 place-items-center">
        <View
          className={`${currentSwitch === LogType.running ? 'logTypeActive' : ''
            } w-full h-full text-center text-16 text-xxx_text`}
          onClick={() => changeCurrentSwitch(LogType.running)}
        >
          运行日志
        </View>
        <View
          className={`${currentSwitch === LogType.abnormal ? 'logTypeActive' : ''
            } w-full h-full text-center text-16 text-xxx_text`}
          onClick={() => changeCurrentSwitch(LogType.abnormal)}
        >
          异常日志
        </View>
        <View
          className={`${currentSwitch === LogType.operate ? 'logTypeActive' : ''
            } w-full h-full text-center text-16 text-xxx_text`}
          onClick={() => changeCurrentSwitch(LogType.operate)}
        >
          操作日志
        </View>
      </View>
      {/*日志列表 */}
      <ScrollView
        className="flex-1 bg-white overflow-hidden pb-24"
        scrollY={true}
        lower-threshold="200"
        onScrollToLower={() => {
          canUpDate && addPage(() => {
            updateLogList()
          })
        }}
      >
        {currentSwitch === LogType.operate
          ? logList.map((item, idx) =>
            <LogByUser logData={item}></LogByUser>)
          : logList.map((item, idx) => (
            <LogByDev
              logData={item}
              devName={devStatus?.devName || ''}
            ></LogByDev>
          ))}

        {/* {
          !canUpDate && logList.length ? (
            <View className="w-full h-40 leading-40 my-12 overflow-hidden text-12 text-xx_text text-center">
              已将到底了~
            </View>
          ) : null
        } */}

        {
          logList.length ? null : (
            <View className="w-full h-40 leading-40 my-12 overflow-hidden text-12 text-xx_text text-center">
              暂无日志~
            </View>
          )
        }
      </ScrollView>
    </View>
  )
}
export default observer(Devlog)
